<template>
  <div class="card-info-bg">
    <a
      :href="item.href"
      :class="[
        'goods-href href-area card-info',
        props.pageType === 'pc' ? 'card-pc' : 'card-mobile'
      ]"
      target="_blank"
    >
      <div class="card-content">
        <img :src="item.pic" alt="" />
        <div class="goods-datainfo" v-if="item.type === MessageType.MESSAGE_ORDER">
          <div>订单编号：{{ item.number }}</div>
          <div class="bottom-row">
            <div class="price">
              ¥
              {{ item.price }}
            </div>
            <div class="action" @click="handleSend">发送链接</div>
          </div>
        </div>
        <div class="goods-datainfo" v-else-if="item.type === MessageType.MESSAGE_GOODS">
          <div>商品名称：{{ item.name }}</div>
          <div class="bottom-row">
            <div class="price">
              ¥
              {{ item.price }}
            </div>
            <div class="action" @click="handleSend">发送链接</div>
          </div>
        </div>
        <div class="goods-datainfo" v-else-if="item.type === MessageType.MESSAGE_CARD">
          <div>{{ item.href }}</div>
          <div class="bottom-row">
            <div class="action" @click="handleSend">发送链接</div>
          </div>
        </div>
      </div>
    </a>
  </div>
</template>

<script lang="ts" setup>
import { MessageType } from '@/lib/types';
import { computed } from 'vue';
const props = defineProps({
  //页面展示类型  pc  mobile
  data: {
    type: Object,
    default: () => {
      return {};
    }
  },
  pageType: {
    type: String,
    default: 'pc'
  }
});
const item = computed(() => {
  return props.data;
});
const emit = defineEmits(['send']);

function handleSend() {
  emit('send');
}
</script>

<style lang="scss" scoped>
.card-info-bg {
  display: flex;
  justify-content: center;
  padding: 10px 0px;
}
.card-info {
  padding: 5px;
  box-shadow: 1px 1px 10px #e2e1e1;
}
.card-pc {
  width: 399px;
}
.card-mobile {
  width: 270px;
}
.card-left {
  border-radius: 0px 8px 8px 8px;
}
.card-right {
  border-radius: 8px 0px 8px 8px;
}
.card-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #333333;
}
.card-content {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 12px;
  color: #666666;

  img {
    width: 56px;
    height: 56px;
    margin-right: 12px;
  }
}
.bottom-row {
  margin-top: 5px;
  display: flex;
  align-items: center;

  .price {
    color: #f32727;
    margin-right: 20px;
  }
  .action {
    color: #337ab7;
    cursor: pointer;
  }
}
</style>
